@charset "UTF-8";
@import "./reset";

.wrap {
	position: relative;
	color: #fff;
	margin: 0 auto;
	text-align: center;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
}


/* 滚动槽 */
::-webkit-scrollbar-track {
	/*-webkit-box-shadow: inset 0 0 6rem rgba(0,0,0,0.3);*/
	border-radius: .10rem;
	width: .10rem;
}

/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
	border-radius: .02rem;
	background: transparent;
	-webkit-box-shadow: inset 0 0 .06rem rgba(0, 0, 0, 0.5);
}

::-webkit-scrollbar-thumb:window-inactive {
	background: transparent;
}

.goCenter {
	justify-content: center;
	text-align: center;
}

//pc面板
.wrap.pc {
	background: url("../img/panel-pc.png") no-repeat top center;
	background-size: 100% 100%;
	width: 88px;
	height: 132px;
	font-size: 12px;
	cursor: pointer;
}

.wrap.pcnew {
	background: url("../img/panel-pcnew.png") no-repeat top center;
	background-size: 100% 100%;
	width: 88px;
	height: 162px;
	font-size: 12px;

	.leg1 {
		.lose {
			height: 98px;
		}

		.enrolling {
			height: 84px;
		}
	}

	.leg4 {
		.lose {
			&.lose2 {
				height: 84px;
			}
		}
	}
}

.pc,
.pcnew {

	// 报名赛
	.leg1 {
		.lose {
			width: 84px;
			height: 86px;
			background: url(../img/ceremony/leg1/panelBg.png)top center no-repeat;
			background-size: 100% 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			margin: 0 auto 5px;

			span {
				font-weight: 600;

				&:first-child {
					font-size: 14px;
					color: #B059F7;
					line-height: 22px;
				}

				&:nth-child(2) {
					font-size: 12px;
					color: #2A2A2A;
				}
			}
		}

		.success {
			span {
				&:first-child {
					color: #FF6A6A;
				}

				&:nth-child(2) {
					color: #B059F7;
				}
			}
		}

		.enrolling {
			position: relative;
			height: 78px;

			div {
				&:first-child {
					width: 72px;
					height: 27px;
					background: url(../img/ceremony/leg1/panelBg2.png)top center no-repeat;
					background-size: 100% 100%;
					font-size: 14px;
					font-weight: 600;
					color: #FFFDF4;
					line-height: 27px;
					text-align: center;
					position: absolute;
					top: -13px;
					left: 50%;
					transform: translate(-50%, 0);
				}

				&:nth-child(2) {
					width: 78px;
					height: 60px;
					background: rgba(255, 255, 255, 0.5);
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: flex-start;
					margin: 17px auto 0;

					p {
						&:first-child {
							width: 56px;
							padding: 0 9px;
							height: 30px;
							background: #EDCBFA;
							font-size: 12px;
							font-weight: 500;
							color: #B059F7;
							line-height: 14px;
							margin-top: 3px;
						}

						&:nth-child(2) {
							width: 100%;
							font-size: 14px;
							font-family: PingFangSC;
							font-weight: 500;
							color: #2A2A2A;
							margin-top: 4px;
						}
					}
				}
			}
		}
	}

	// 淘汰赛面板
	.leg2 {
		.leg2Info {
			li {
				width: 82px;
				height: 26px;
				background: url(../img/welfare/pc_square_m.png)top center no-repeat;
				background-size: 100% 100%;
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-bottom: 8px;
				&.res{
					background: none;
					height: 16px;
					margin-bottom: 0;
					p:first-child{
						color: #000;
						background: url(../img/welfare/pc_square_m.png)top center no-repeat;
						background-size: 100% 100%;
						margin-bottom: 3px;
					}
				}
				p {
					&:first-child {
						width: 81px;
						height: 15px;
						background: url(../img/welfare/title2.png)top center no-repeat;
						background-size: 100% 100%;
						font-size: 12px;
						font-family: PingFangSC;
						font-weight: 500;
						color: #FFFFFF;
						line-height: 15px;
						text-align: center;
						margin-top: -6px;
					}

					&:nth-child(2) {
						font-size: 12px;
						font-family: PingFangSC;
						font-weight: 500;
						color: #2A2A2A;
						line-height: 15px;
						text-align: center;
					}
				}

				&:nth-child(3) {
					margin-bottom: 3px;

				}
			}

		}

		.gift {
			li:nth-child(2) {
				margin-bottom: 2px;
			}

			li:nth-child(3) {
				width: 72px;
				padding: 0 5px;
				height: 42px;
				background: rgba(255, 255, 255, 0.5);
				font-size: 12px;
				font-family: PingFangSC;
				font-weight: 500;
				color: #B059F7;
				line-height: 12px;
				display: flex;
				align-items: center;
				justify-content: center;
				text-align: left;
			}
		}
	}

	// 决赛
	.leg4 {
		.lose {
			&.lose2 {
				height: 74px;
				position: relative;

				span:nth-child(3) {
					width: 72px;
					height: 27px;
					background: url(../img/ceremony/leg1/panelBg2.png)top center no-repeat;
					background-size: 100% 100%;
					position: absolute;
					top: -13px;
					left: 50%;
					transform: translate(-50%, 0);
					font-size: 14px;
					text-align: center;
					color: #FFFDF4;
					line-height: 27px;
				}
			}

			&.lose3 {
				span {
					color: #FF315D;
					font-size: 18px;

					&:first-child {
						font-size: 12px;
					}
				}
			}
		}

		.leg2Info {

			li:nth-child(2) {
				margin-bottom: 3px;
			}

			li:nth-child(3) {
				width: 82px;
				padding: 2px 0;
				background: rgba(255, 255, 255, 0.5);
				color: #B059F7;
				justify-content: center;
				height: unset;

				&.active {
					margin-bottom: 10px;
				}
			}
		}
	}

	.raceResult {
		width: 74px;
		height: 18px;
		background: #FA1F1F;
		border: 1px solid #EFBF63;
		border-radius: 9px;
		margin: 0 auto 8px;
		font-size: 14px;
		font-family: PingFangSC;
		font-weight: 500;
		color: #FFFDF4;
		line-height: 18px;
		text-align: center;

		&.raceResult1 {
			background: #B059F7;
		}

		&.raceResult2 {
			background: #7D7D7D;
		}
	}
}

.mss,
.mnew {

	// 报名赛
	.leg1 {
		.lose {
			width: 1.46rem;
			height: .94rem;
			background: url(../img/ceremony/leg1/panelBg-m.png)top center no-repeat;
			background-size: 100% 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			margin: 0 auto .05rem;
			border-radius: .08rem;

			span {
				font-weight: 600;

				&:first-child {
					font-size: .22rem;
					color: #B059F7;
					line-height: .22rem;
				}

				&:nth-child(2) {
					font-size: .2rem;
					color: #2A2A2A;
					line-height: .26rem;
				}
			}
		}

		.success {
			span {
				&:first-child {
					color: #FF6A6A;
				}

				&:nth-child(2) {
					color: #B059F7;
				}
			}
		}

		.enrolling {
			position: relative;
			height: .92rem;

			div {
				&:first-child {
					width: .94rem;
					height: .39rem;
					background: url(../img/ceremony/leg1/panelBg2-m.png)top center no-repeat;
					background-size: 100% 100%;
					font-size: .16rem;
					font-weight: 500;
					color: #FFFDF4;
					line-height: .37rem;
					text-align: center;
					position: absolute;
					top: -.18rem;
					left: 50%;
					transform: translate(-50%, 0);
				}

				&:nth-child(2) {
					width: 1.38rem;
					height: .68rem;
					background: rgba(255, 255, 255, 0.5);
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: flex-start;
					margin: .17rem auto 0;
					border-radius: .06rem;

					p {
						&:first-child {
							width: 1.32rem;
							height: .26rem;
							background: #EDCBFA;
							border-radius: .13rem;
							font-size: .16rem;
							font-weight: 500;
							color: #B059F7;
							line-height: .26rem;
							margin-top: .06rem;
						}

						&:nth-child(2) {
							width: 100%;
							font-size: .22rem;
							font-family: PingFangSC;
							font-weight: 500;
							color: #2A2A2A;
							margin-top: .03rem;
						}
					}
				}
			}
		}
	}

	// 淘汰赛面板
	.leg2 {
		.leg2Info {
			li {
				width: 1.44rem;
				height: .33rem;
				background: url(../img/welfare/mss_square_m.png)top center no-repeat;
				background-size: 100% 100%;
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-bottom: .1rem;
				&.res{
					background: none;
					height: 0.23rem !important; 
					margin-bottom: 0;
					p:first-child{
						color: #000;
						background: url(../img/welfare/mss_square_m.png)top center no-repeat;
						background-size: 100% 100%;
						margin-bottom: 0.05rem;
					}
				}
				p {
					&:first-child {
						width: 1.35rem;
						height: .22rem;
						background: url(../img/welfare/title3.png)top center no-repeat;
						background-size: 100% 100%;
						font-size: .16rem;
						font-family: PingFangSC;
						font-weight: 500;
						color: #FFFFFF;
						line-height: .22rem;
						text-align: center;
						margin-top: -.12rem;
					}

					&:nth-child(2) {
						font-size: .2rem;
						font-family: PingFangSC;
						font-weight: 500;
						color: #2A2A2A;
						line-height: .22rem;
						text-align: center;
					}
				}

				&:nth-child(3) {
					// margin-bottom: .03rem;

				}
			}

		}

		.gift {
			li:nth-child(2) {
				margin-bottom: .02rem;
			}

			li:nth-child(3) {
				width: 1.3rem;
				padding: 0 .07rem;
				height: .54rem;
				background: rgba(255, 255, 255, 0.5);
				font-size: .16rem;
				font-family: PingFangSC;
				font-weight: 500;
				color: #B059F7;
				line-height: .18rem;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-bottom: .03rem;
				border-radius: .06rem;
				text-align: left;
			}
		}
	}

	// 决赛
	.leg4 {
		.lose {
			&.lose2 {
				position: relative;

				span:nth-child(3) {
					width: .94rem;
					height: .39rem;
					background: url(../img/ceremony/leg1/panelBg2-m.png)top center no-repeat;
					background-size: 100% 100%;
					position: absolute;
					top: -.19rem;
					left: 50%;
					transform: translate(-50%, 0);
					font-size: .2rem;
					text-align: center;
					color: #FFFDF4;
					line-height: .39rem;
				}
			}

			&.lose3 {
				span {
					color: #FF315D;
					font-size: .26rem;
					line-height: .26rem;

					&:first-child {
						font-size: .2rem;
						font-weight: normal;
					}
				}
			}

		}

		.leg2Info {
			li:nth-child(2) {
				margin: 0 auto .03rem;
			}

			li:nth-child(3) {
				width: 1.4rem;
				padding: .02rem 0;
				background: rgba(255, 255, 255, 0.5);
				color: #B059F7;
				justify-content: center;
				height: unset;
				margin: 0 auto .03rem;
			}
		}
	}

	.raceResult {
		width: 1.2rem;
		height: .24rem;
		background: #FA1F1F;
		border: .01rem solid #EFBF63;
		border-radius: .12rem;
		margin: 0 auto .13rem;
		font-size: .2rem;
		font-family: PingFangSC;
		font-weight: 500;
		color: #FFFDF4;
		line-height: .24rem;
		text-align: center;

		&.raceResult1 {
			background: #B059F7;
		}

		&.raceResult2 {
			background: #7D7D7D;
		}
	}
}

//小面板新
.wrap.mss {
	width: 1.5rem;
	font-size: 0.18rem;
	height: 1.74rem;
	background: url("../img/panel-mss.png") no-repeat top center;
	background-size: 100% 100%;
	overflow: hidden;
	border-radius: 0.1rem;
}

//大面板
.wrap.mnew {
	width: 1.5rem;
	height: 2.82rem;
	font-size: 0.2rem;
	background: url("../img/panel-mnew.png") no-repeat top center;
	background-size: 100% 100%;
	border-radius: .2rem;

	.leg1 {
		.lose {
			height: 1.3rem;
			margin-bottom: .3rem;

			span {
				&:nth-child(2) {
					margin-top: .1rem;
				}
			}
		}

		.enrolling {

			div {
				&:nth-child(2) {
					height: 1.02rem;

					p {
						&:first-child {
							margin-top: .15rem;
						}

						&:nth-child(2) {
							margin-top: .1rem;
						}
					}
				}
			}
		}
	}

	.leg2 {
		.leg2Info {
			li {
				height: .44rem;

				&:nth-child(3) {
					margin-bottom: .12rem;

				}
			}

		}

		.gift {
			li:nth-child(2) {
				margin-bottom: .02rem;
			}

			li:nth-child(3) {
				height: .6rem;
				background: rgba(255, 255, 255, 0.5);
				line-height: .26rem;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: .06rem;
				text-align: left;
			}
		}
	}

	// 决赛
	.leg4 .leg2Info {
		li:nth-child(3) {
			height: unset;

			&.active {
				margin-bottom: .3rem;
			}
		}
	}
}